<template>
  <div>
    <el-button @click="dialogSpan(address)">复制</el-button>
    <p v-if="!dialogVisible">
      {{address}}
    </p>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%">
      <el-input ref="addressInput" type="textarea" v-model="address"></el-input>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      address: "    春天，是大自然最美的季节。万物苏醒，草木葱茏，一片片嫩绿的叶子在阳光下闪烁。桃花、樱花竞相绽放，花香四溢，令人陶醉。鸟儿们在枝头欢快地歌唱，仿佛在诉说着春天的故事。\n" +
          "    田野里，农民伯伯们忙碌着播种，他们满怀希望地期待着丰收的季节。小溪潺潺，流水清澈，为大地增添了几分灵动。\n" +
          "    春天也是孩子们的季节，他们在草地上奔跑嬉戏，放飞风筝，笑声在空中回荡。一切都显得那么生机勃勃，春意盎然。\n" +
          "    让我们珍惜这美好的时光，用心感受春天的温暖与希望，让心灵在大自然的怀抱中得到净化与升华。",
      dialogVisible: false,
    };
  },
  methods: {
    dialogSpan(res){
      this.dialogVisible = true
      setTimeout(() => {
        this.copyLink(res)
      },20)
    },
    // 判断是否是 IE 浏览器
    isIE() {
      if (window.ActiveXObject || "ActiveXObject" in window) {
        return true;
      } else {
        return false;
      }
    },
    // 拷贝地址
    copyLink(copy) {
      if (this.isIE()) {
        this.$copyText(copy);
        this.$refs.addressInput.select(); // 实现选中效果
        this.$message.success("复制成功!");
      } else {
        this.$copyText(copy).then((res) => {
          console.log(res, 'res')
          this.$refs.addressInput.select(); // 实现选中效果
          this.$message.success("复制成功!");
        }).catch((err) => {
          this.$message.error("该浏览器不支持自动复制, 请手动复制");
        });
      }
    },
  },
};
</script>

<style lang="css" scoped>
/deep/ .el-dialog__header{
  padding: 6px 16px 6px;
  background-color: aquamarine;
}
/deep/ .el-dialog__headerbtn{
  top: 8px;
}
/deep/ .el-dialog__body {
  height: 200px;
  padding: 6px 5px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}
/deep/ .el-textarea__inner{
  overflow: hidden;
  height: 200px;
}
</style>
